<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate" />

<div class="alert alert-info">
  Click on a month view day or a time on the week or day view to select it
</div>

<div>
  @switch (view) { @case ('month') {
  <mwl-calendar-month-view
    [viewDate]="viewDate"
    [events]="events"
    (beforeViewRender)="beforeMonthViewRender($event)"
    (dayClicked)="dayClicked($event.day)"
  />
  } @case ('week') {
  <mwl-calendar-week-view
    [viewDate]="viewDate"
    [events]="events"
    (beforeViewRender)="beforeWeekOrDayViewRender($event)"
    (hourSegmentClicked)="hourSegmentClicked($event.date)"
  />
  } @case ('day') {
  <mwl-calendar-day-view
    [viewDate]="viewDate"
    [events]="events"
    (beforeViewRender)="beforeWeekOrDayViewRender($event)"
    (hourSegmentClicked)="hourSegmentClicked($event.date)"
  />
  } }
</div>
